<template>
  <el-card class="box-card-component" shadow="never">
    <div class="box-card-header">
      <img src="@/assets/images/dashboard/te.png">
    </div>

    <div style="position: relative;">
      <PanThumb :image="avatar" class="panThumb" style="margin-top: 30px;">
      </PanThumb>

      <Mallki class="mallki-text" text="vue-typescript-admin" />

      <div style="padding-top:35px;" class="progress-item">
        <span>Vue</span>
        <el-progress :percentage="51" />
      </div>

      <div class="progress-item">
        <span>Typescript</span>
        <el-progress :percentage="45" />
      </div>

      <div class="progress-item">
        <span>CSS</span>
        <el-progress :percentage="4" />
      </div>

      <div class="progress-item">
        <span>ESLint</span>
        <el-progress :percentage="100" status="success" />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import PanThumb from '@/components/PanThumb/index.vue'
import Mallki from '@/components/text-hover-effect/Mallki.vue'
import { useStore } from '@/store'

const store = useStore()

const url = import.meta.url
const avatarUrl = `/src${store.state.user.avatar}`
const avatar = new URL(avatarUrl, url).href
</script>

<style lang="scss" scoped>
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
}

.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      opacity: 0.3;
      transition: all 1s linear;

      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
        opacity: 1;
      }
    }
  }

  .mallki-text {
    position: absolute;
    top: 90px;
    left: 170px;
    font-size: 20px;
    font-weight: bold;
  }

  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }

  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: none;
    }
  }
}
</style>
